import React, {ChangeEvent, FC, useEffect, useState} from 'react';
import './index.css';
import {Button, Input, message, Modal, Space, Table, Tag} from 'antd';
import {ExclamationCircleFilled} from '@ant-design/icons';
import {useLocation, useNavigate, useSearchParams} from 'react-router-dom';

/**
 * 问卷接口
 */
interface question{
	// id
	_id: string;
	// 标题
	title: string;
	// 是否发布： 已发布/未发布
	isPublished: boolean;
	// 是否标星
	isStar: boolean;
	// 答卷数量
	answerCount: number;
	// 创建时间
	createdAt: string;
}

/**
 * 回收站页面
 */
const Trash: FC = () => {
	const navigate = useNavigate();
	const {pathname} = useLocation();
	const [searchParams] = useSearchParams();
	const {confirm} = Modal;
	const {Search} = Input;

	/* 问卷数据列表 */
	const [questionList] = useState<question[]>([
		{_id: 'q6', title: '问卷6', isPublished: false, isStar: false, answerCount: 4, createdAt: '2022-03-10 13:05:11'},
		{_id: 'q7', title: '问卷7', isPublished: false, isStar: true, answerCount: 6, createdAt: '2022-03-14 13:05:11'},
		{_id: 'q8', title: '问卷8', isPublished: true, isStar: false, answerCount: 8, createdAt: '2022-03-15 13:05:11'},
	]);
	/* 选中的问卷数据列表 */
	const [selectQuestionListKeys, setSelectQuestionListKeys] = useState<React.Key[]>([]);
	/* 搜索条件 */
	const [searchValue, setSearchValue] = useState<string>('');

	/**
	 * 搜索条件变化调用方法
	 */
	const searchValueChange = (event: ChangeEvent<HTMLInputElement>) => {
		console.log('searchValueChange -> event.target.value', event.target.value);
		setSearchValue(event.target.value);
	};

	/**
	 * 页面加载前执行函数
	 */
	useEffect(() => {
		// 获取路径中的搜索参数
		setSearchValue(searchParams.get('keyword') || '');
	}, [searchParams]);

	/**
	 * 搜索条件变化调用方法
	 */
	const search = (value: string) => {
		console.log('search -> value', value);
		// 跳转到当前页面，并且附带搜索参数
		navigate({
			pathname,
			search: `keyword=${searchValue}`,
		});
	};

	/**
	 * 列表头
	 */
	const columns = [
		{
			title: '主键',
			dataIndex: '_id',
		},
		{
			title: '标题',
			dataIndex: 'title',
		},
		{
			title: '发布状态',
			dataIndex: 'isPublished',
			render: (isPublished: boolean) => {
				return isPublished ? <Tag color="processing">已发布</Tag>:<Tag>未发布</Tag>;
			}
		},
		{
			title: '是否标星',
			dataIndex: 'isStar',
			render: (isStar: boolean) => {
				return isStar ? <Tag color="processing">是</Tag>:<Tag>否</Tag>;
			}
		},
		{
			title: '答卷',
			dataIndex: 'answerCount',
		},
		{
			title: '创建时间',
			dataIndex: 'createdAt',
		},
		// {
		// 	title: '操作',
		// 	render: (q: question) => {
		// 		return (
		// 			<Space>
		// 				<a href="/#" onClick={() => console.log(q)}>恢复</a>
		// 				<a href="/#" onClick={() => console.log(q)}>删除</a>
		// 			</Space>
		// 		);
		// 	}
		// },
	];

	/**
	 * 问卷列表变动执行方法
	 */
	const onSelectQuestionListChange = (newSelectedRowKeys: React.Key[]) => {
		setSelectQuestionListKeys(newSelectedRowKeys);
	};

	/**
	 * 选中行
	 */
	const rowSelection = {
		selectedRowKeys: selectQuestionListKeys,
		onChange: onSelectQuestionListChange,
	};

	/**
	 * 是否删除选中的问卷列表
	 */
	const isDeleteSelectQuestionList = () => {
		if(selectQuestionListKeys.length > 0){
			confirm({
				title: '确定彻底删除选中的问卷？',
				icon: <ExclamationCircleFilled/>,
				onOk: deleteSelectQuestionList,
			});
		}else{
			message.warning('请选中要删除的问卷！').then();
		}
	};

	/**
	 * 是否恢复选中的问卷列表
	 */
	const isRestoreSelectQuestionList = () => {
		if(selectQuestionListKeys.length > 0){
			confirm({
				title: '确定恢复选中的问卷？',
				icon: <ExclamationCircleFilled/>,
				onOk: restoreSelectQuestionList,
			});
		}else{
			message.warning('请选中要恢复的问卷！').then();
		}
	};

	/**
	 * 删除选中的问卷列表
	 */
	const deleteSelectQuestionList = () => {
		console.log(selectQuestionListKeys);
		message.success('删除问卷成功！').then();
		setSelectQuestionListKeys([]);
	};

	/**
	 * 恢复选中的问卷列表
	 */
	const restoreSelectQuestionList = () => {
		console.log(selectQuestionListKeys);
		message.success('恢复问卷成功！').then();
		setSelectQuestionListKeys([]);
	};

	return (
		<div className="question-list">
			{/* 头部 */}
			<div className="question-list-header">
				{/* 头部左侧 */}
				<div className="question-list-header-left">
					<h2>标星问卷</h2>
				</div>
				{/* 头部右侧 */}
				<div className="question-list-header-right">
					<Search
						style={{width: 200}}
						allowClear
						value={searchValue}
						onChange={searchValueChange}
						onSearch={search}
						placeholder="请输入关键字"
					/>
				</div>
			</div>

			{/* 身体 */}
			<div className="question-list-content">
				<div className="question-list-content-button">
					<Space>
						<Button
							size="middle"
							type="primary"
							onClick={isRestoreSelectQuestionList}
						>
							恢复
						</Button>
						<Button
							size="middle"
							type="primary"
							danger
							onClick={isDeleteSelectQuestionList}
						>
							删除
						</Button>
					</Space>
				</div>
				<Table
					dataSource={questionList}
					columns={columns}
					pagination={false}
					rowKey={(q) => q._id}
					rowSelection={{
						type: 'checkbox',
						...rowSelection,
					}}
				/>
			</div>

			{/* 尾部 */}
			<div className="question-list-footer">
				footer
			</div>
		</div>
	);
};

export default Trash;